<template>
	<view>
		<view class="hotTitle">
			本店热卖
		</view>
		<view class="hotProduct">
			<view class="hotList" v-for="item in list.list" :key="item.goods_id">
				<!-- <img :src="item.img" alt=""> -->
				<image :src="$image + item.sku_image" mode=""></image>
				<view class="productName">
					{{item.goods_name}}
				</view>
				<view class="price">
					<view class="money">￥{{item.price}}</view>
					<view class="addProduce" @click.stop="addShoppingCart(item)">+</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	const $api = require('@/utils/request.js').API
	export default {
		// hotList
		props: ['arr','ShoppingCartList'],
		data() {
			return {
				list: [],
				commodityNum: 0,
				$image: this.$image,
			}
		},

		// props:{
		// 	hotList:{
		// 		type:Array,
		// 		default: false
		// 	}
		// },
		comments: {

		},
		created() {
			this.CommodityList()
		},
		methods: {
			// 加入购物车
			addShoppingCart(item) {
				let obj = {
					token: uni.getStorageSync('token'),
					sku_id: item.sku_id,
					site_id: item.site_id,
					num: this.commodityNum += 1,
				}
				$api.postAddShoppingCart(obj).then(res => {
					if(res.data.code == 0) {
						this.$emit('costs',1)
					}
				})
				this.ShoppingCartList()
			},
			CommodityList(){
				let obj = {
					site_id: this.arr.site_id,
					is_hot:1
				}
				$api.postCommodityList(obj).then(res => {
					if(res.data.code == 0) {
						this.list = res.data.data
					}
				})
			}
		}
	}
</script>

<style lang="less" scoped>
	.hotTitle {
		padding-left: 37rpx;
		width: 702rpx;
		height: 72rpx;
		line-height: 72rpx;
		font-size: 28rpx;
		font-weight: 400;
		color: #333333;
		background: url('../../static/index/hotFire.png') no-repeat center left;
		background-size: 26rpx 36rpx;
		border-bottom: 1rpx solid #EEEDE9;
	}

	.hotProduct {
		padding: 39rpx 0 24rpx 45rpx;
		display: flex;
		width: 705rpx;
		// height: 442rpx;
		height: 350rpx;
		overflow-x: scroll;
		border-radius: 40rpx 40rpx 0rpx 0rpx;

		.hotList {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: space-between;
			margin-right: 15rpx;
			width: 195rpx;
			height: 286rpx;
			border: 2px solid #F4F4F4;

			img {
				margin: 41rpx 30rpx;
				width: 136rpx;
				height: 89rpx;
				box-shadow: 0rpx 17rpx 30rpx 0rpx rgba(102, 70, 8, 0.15);
			}
			
			image {
				margin: 41rpx 30rpx;
				width: 136rpx;
				height: 89rpx;
				box-shadow: 0rpx 17rpx 30rpx 0rpx rgba(102, 70, 8, 0.15);
			}

			.productName {
				color: #333333;
				font-size: 26rpx;
			}

			.price {
				display: flex;
				justify-content: space-between;
				padding: 0 19rpx 22rpx 17rpx;
				width: 100%;
				font-size: 28rpx;
				line-height: 32rpx;

				.money {
					color: #E54302;
				}
				
				.addProduce {
					width: 31rpx;
					height: 31rpx;
					line-height: 28rpx;
					text-align: center;
					color: #fff;
					background: #F14500;
					border-radius: 50%;
				}
			}
		}
	}
</style>